<div id="app">
  <h3>小黑的书架</h3>
  书名:<input type="text" v-model="val">
  作者：<input type="text" v-model="author">
  <button @click="add">添加</button>
  <ul>
    <li v-for="(item, index) in booksList" :key="item.id">
      <span>{{item.name}}</span>
      <span>{{item.author}}</span>
      <button>删除</button>
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      val: '',
      author: '',
      booksList: [
        { id: 1, name: '《红楼梦》', author: '曹雪芹' },
        { id: 2, name: '《西游记》', author: '吴承恩' },
        { id: 3, name: '《水浒传》', author: '施耐庵' },
        { id: 4, name: '《三国演义》', author: '罗贯中' }
      ]
    },
    methods: {
      add () {
        this.booksList.push({
          id: this.booksList.length + 1,
          name: this.val,
          author: this.author
        })
        this.val = this.author = ''
      }
    }
  })
</script>